<template>
  <div id="illDistribution"></div>
</template>
<script scoped>
export default {
  data() {
    return {
      // intruderAlarm: 0, //入侵报警
      // fireAlarm: 0, //火灾报警
      // otherAlarm: 0, //其他报警
      // myChart: "",
    };
  },
  methods: {
    // 获取安防态势数据
    // getalarmType() {
    //   alarmType()
    //     .then((res) => {
    //       console.log(res);
    //       this.alarmType1 = res.data.一般告警;
    //       this.alarmType2 = res.data.紧急告警;
    //       this.alarmType3 = res.data.重要告警;
    //     })
    //     .catch((err) => {
    //       console.log(err);
    //     });
    // },
    // 自适应
    winSize() {
      var ratioY = window.innerHeight / 188;
      var ratioX = window.innerWidth / 370;
      var ratioY = window.innerHeight / 880;
        var ratioX = window.innerWidth / 370;
      window.document.body.style.transform = "scale(" + ratioY + ")";
      window.document.body.style.transformOrigin = "0px 0px";
      // this.getalarmType();
    },
    // 绘制echarts图表
    setEcharts() {
      this.myChart = this.$echarts.init(
        document.getElementById("illDistribution")
      );

      var img =
        "";

      var trafficWay = [
        {
          name: "泛光照明",
          value: 20,
        },
        {
          name: "DAL照明",
          value: 10,
        },
        {
          name: "普通照明",
          value: 30,
        },
        {
          name: "照明",
          value: 40,
        },
      ];

      var data = [];
      var color = [
        "#00ffff",
        "#00cfff",
        "#006ced",
        "#ffe000",
        "#ffa800",
        "#ff5b00",
        "#ff3000",
      ];
      for (var i = 0; i < trafficWay.length; i++) {
        data.push(
          {
            value: trafficWay[i].value,
            name: trafficWay[i].name,
            itemStyle: {
              normal: {
                borderWidth: 1,
                shadowBlur: 5,
                borderColor: color[i],
                shadowColor: color[i],
              },
            },
          },
          {
            value: 2,
            name: "",
            itemStyle: {
              normal: {
                label: {
                  show: false,
                },
                labelLine: {
                  show: false,
                },
                color: "rgba(0, 0, 0, 0)",
                borderColor: "rgba(0, 0, 0, 0)",
                borderWidth: 0,
              },
            },
          }
        );
      }
      var seriesOption = [
        {
          name: "",
          type: "pie",
          clockWise: false,
          radius: [45, 48],
          radius: [240, 248],
          width: "70%",
          itemStyle: {
            normal: {
              label: {
                show: true,
                position: "outside",
                color: "#fff",
                fontSize: 30,
                fontWeight: 700,
                formatter: function (params) {
                  if (params.name !== "") {
                    return params.percent + "%" + "\n" + "\n" + params.name;
                  } else {
                    return "";
                  }
                },

                textStyle: {
                  //这只是为了让文字居中而已
                  align: "center", //水平对齐方式可选left，right，center
                  baseline: "middle", //垂直对齐方式可选top，bottom，middle
                },
              },
              labelLine: {
                length: 30,
                length2: 50,
                show: true,
                color: "#ffffff",
              },
            },
          },
          data: data.filter((item) => {
            return item.name;
          }), //将数据中name为空的筛选出去   解决图例自动换行的问题
        },
      ];
      let option = {
        color: color,
        title: {
          text: "165\n照明分布",
          top: "center",
          textAlign: "center",
          left: "34.5%",
          textStyle: {
            color: "#fff",
            fontSize: 35,
            fontWeight: "700",
            lineHeight: 50,
          },
        },
        graphic: {
          elements: [
            {
              type: "image",
              z: 3,
              style: {
                image: img,
                width: 68,
                height: 68,
                width: 368,
                height: 368,
              },
              left: "25.5%",
              left: "23.5%",
              top: "center",
              position: [100, 100],
            },
          ],
        },
        tooltip: {
          show: false,
        },
        legend: {
          show: "true",
          right: "8%",
          top: "center",
          orient: "vertical",
          itemWidth: 25,
          itemHeight: 15,
          textStyle: {
            color: "#fff",
            fontSize: 25,
          },
        },
        toolbox: {
          show: false,
        },
        series: seriesOption,
      };
      this.myChart.setOption(option);
    },
  },
  mounted() {
    this.setEcharts();
    // this.getalarmType();
    this.winSize();
    window.onresize = () => {
      return (() => {
        var ratioY = window.innerHeight / 880;
        var ratioX = window.innerWidth / 370;
        window.document.body.style.transform = "scale(" + ratioY + ")";
        window.document.body.style.transformOrigin = "0px 0px";
      })();
    };
  },
};
</script>
<style scoped lang="less">
#illDistribution {
  display: flex;
  width: 1712px;
  height: 880px;
  padding: 50px 40px;

  box-sizing: border-box;
}
</style>
